<?php
require_once 'header.php';
if(!is_session('loginInfo')){
    header('location:login.php');
}
include_once 'public/head_title.php';
?>
<body>
<?php
    include_once 'public/head.php';
    include_once 'public/left.php';
    $user_list = $db->table('lh_user')->field('*')->orderBy('id asc')->get();
?>
<div class="body" id="app">
    <div class="alert alert-success alert-dismissable" id="close">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        成功！很好地完成了提交。
    </div>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        添加用户
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加用户
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon">*用户名:</span>
                        <input type="text" class="form-control" name="username" placeholder="请输入用户名" v-model="username">
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon">*密&nbsp;&nbsp; &nbsp;码:</span>
                        <input type="password" name="password" class="form-control" placeholder="请输入密码" v-model="password">
                    </div>
                </div>
                <p id="userMsg"></p>
                <p id="passMsg"></p>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" v-on:click="addUser">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <table class="table table-striped">
        <caption>网站用户列表</caption>
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>密码</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <?php
            foreach ($user_list as $key => $value){
        ?>
        <tr>
            <td><?php echo $value['id'];?></td>
            <td><?php echo $value['username'];?></td>
            <td><?php echo $value['password'];?></td>
            <td><?php echo $value['status'] == 1 ? '正常' : '暂停';?></td>
            <td><?php echo date('Y-m-d',$value['create_time']);?></td>
            <td>
                <button type="button" class="btn btn-primary btn-xs">修改</button>
                <button type="button" class="btn btn-primary btn-xs">删除</button>
            </td>
        </tr>
        <?php
            }
        ?>
        </tbody>
    </table>
</body>
<?php
include_once 'public/footer.php';
?>
<script type="text/javascript">



    new Vue({
        el:'#app',
        data:{
            username:'',
            password:''
        },
        methods:{
            addUser:function(event){
                "use strict";
                let that = this;
                let param = new URLSearchParams();
                param.append('username',that.username);
                param.append('password',that.password);
                getDomById('userMsg').innerHTML = '';
                getDomById('passMsg').innerHTML = '';
                axios({
                    method:'post',
                    url:'api/add_user_do.php',
                    data:param
                }).then(function (res) {
                    if(res.data.code == 1){
                        $("#close").show();
                        let data = res.data.data;
                        let html = `<tr>`;
                        html += `<td>${data.id}</td>`;
                        html += `<td>${data.username}</td>`;
                        html += `<td>${data.password}</td>`;
                        html += `<td>${data.status_name}</td>`;
                        html += `<td>${data.create_time_show}</td>`;
                        html += `<td>
                                  <button type="button" class="btn btn-primary btn-xs">修改</button>
                                  <button type="button" class="btn btn-primary btn-xs">删除</button>
                                </td>`;
                        html += `</tr>`;
                        $("#tb").append(html);
                        $("#myModal").hide();
                        $(".modal-backdrop").hide();
                        setTimeout(function () {
                            $("#close").hide();
                        },2000);
                    }else{
                        if(that.username.length == 0 && that.password.length >= 6){
                            getDomById('userMsg').innerHTML = res.data.message;
                        }else if(that.username.length > 0 && that.password.length < 6){
                            getDomById('passMsg').innerHTML = res.data.message;
                        }else if(that.username.length == 0 && that.password.length < 6){
                            getDomById('userMsg').innerHTML = '请输入用户名';
                            getDomById('passMsg').innerHTML = '密码不能小于六位';
                        }
                    }
                });
            }
        }
    });

    //在提交之前进行前端验证
    let inputs = document.querySelectorAll("[name='username'],[name='password']");
    [...inputs].map(item => {
        "use strict";
        item.addEventListener("keyup",()=>{
            let userMsg = '';
            let passMsg = '';
            if(queryByName('username').value.length == 0){
                userMsg = '请输入用户名';
            }
            if(queryByName('password').value.length < 6){
                passMsg = '密码不能小于六位';
            }
            getDomById('userMsg').innerHTML = userMsg;
            getDomById('passMsg').innerHTML = passMsg;
        });
    });

</script>
